$--title-height: 40px;
$--rule-list-width: 25%;

.show-area {

  .rule-title {
    width: 100%;
    height: $--title-height;
  }

  .rule-area {
    width: 100%;
    height: calc(100% - #{$--title-height});

    &-list {
      width: 100%;
      height: 100%;
      border-left: 1px solid #EBEEF5;
      border-right: 1px solid #EBEEF5;

      &-title {
        width: 100%;
        padding: 0 12px;
        display: flex;

        &-name {
          width: calc(100% - 220px);
        }

        &-btn {
          // width: 230px;
          // display: flex;
          // justify-content: flex-end;

          div {
            transition: width .6s;
            overflow: hidden;
          }
        }
      }

      &-content {
        width: 100%;
        padding: 8px;
        border-top: 1px dashed #EBEEF5;

        .condition-item {
          display: flex;

          &-icon {
            width: 90px;
            background: #f6f6f6;
            margin: 4px;
            margin-right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
          }

          &-content {
            width: calc(100% - 90px);
          }
        }
      }
    }
  }
}
